<script lang="ts">
	import { defineComponent, reactive } from 'vue';

	export default defineComponent({
		name: 'use-tabbar',
		props: {
			tabbarIndex: Number
		},
		setup(props) {
			const { tabbarIndex } = props;
			const list = reactive([{
				label: "首页",
				path: "/pages/tabbar/index",
				icon: "/static/icons/index.png",
				selectedIcon: "/static/icons/index-active.png",
			},
			{

				label: "日历",
				path: "/pages/tabbar/calendar",
				icon: "/static/icons/calendar.png",
				selectedIcon: "/static/icons/calendar-active.png",

			}, {

				label: "成长森林",
				path: "/pages/tabbar/growing",
				icon: "/static/icons/forest.png",
				selectedIcon: "/static/icons/forest-active.png",

			},
			{
				label: "我的",
				path: "/pages/tabbar/mine",
				icon: "/static/icons/mine.png",
				selectedIcon: "/static/icons/mine-active.png",
			},
			]);
			const changeTabBar = (index:number) => {
				console.log("changeTabBar", index,list[index].path);
			
				// getApp().globalData.tabbarIndex = index; //切换菜单时修改全局变量tabbarIndex
				uni.switchTab({
					url: list[index].path,
				});
			}
			return {
				list, changeTabBar
			};
		}
	});
</script>

<template>
	<cover-view class="tabBarRow">
		<cover-view v-for="(item, index) in list" :key="index" class="tabBarCell"
			:class="['tabBarItem', index == tabbarIndex ? 'selctedIcon' : 'icon']" @click="changeTabBar(index)">
			<cover-image :src="index == tabbarIndex ? item.selectedIcon : item.icon"></cover-image>
		</cover-view>
	</cover-view>
</template>

<style lang="scss" scoped>
	.tabBarRow {
		flex-direction: row;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		align-items: center;
		justify-items: center;
		width: 100%;
		height: 104rpx;
		position: fixed;
		bottom: 0;
		z-index: 999;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		/* padding-bottom: 40rpx */
		display: flex;
		justify-content: space-around;
		backdrop-filter: blur(3px);
		background-color:rgba(255,255,255,0.35);
	}

	.tabBarItem {
		height: 90rpx;
		width:90rpx;
		position: relative;
		top: -5rpx;
	}

	.selctedIcon {
		height: 86rpx;
		width: 86rpx;
	}

	.icon {
		height: 86rpx;
		width: 86rpx;
	}

	.tabBarItem image {
		height: 100%;
		width: 100%;
	}
</style>